<template>
    <div>
        <bread-crumb></bread-crumb>
        <div class="box">
            <h1>带头像的信息</h1>
            <div class="tent">
                <el-table :data="info" style="width: 900px" border size="mini" @row-click="godatil">
                    <el-table-column prop="stu_id" label="学号" width="80">
                    </el-table-column>
                    <el-table-column prop="stu_name" label="姓名" width="80">
                    </el-table-column>
                    <el-table-column prop="stu_sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="stu_jg" label="籍贯">
                    </el-table-column>
                    <el-table-column prop="stu_date" label="出生日期" width="120">
                        <template slot-scope="scope">
                            <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stu_gbf" label="男或女朋友">
                    </el-table-column>
                    <el-table-column prop="stu_hobby" label="爱好">
                    </el-table-column>
                    <el-table-column prop="stu_head_img" label="头像">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.stu_head_img"
                                :preview-src-list="srcList" @click="bigImage(scope.row.stu_head_img)">
                            </el-image>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    :current-page="currentPage" @current-change="currentChange">
                </el-pagination>
            </div>
        </div>
    </div>

</template>
  
<script>
import request from '../../api/request';
export default {
    data() {
        return {
            info: [],
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            ],
            total:0,
            pageSize:5,
            totalData:0,
            currentPage:1
        }
    },
    async mounted() {
        let stult = await request({ method: 'get', url: 'search_info', arg: {}, headerType: '' });
        this.info = stult.data;
        this.total = stult.data.length
        this.totalData = stult.data;
        this.info = this.totalData.slice(
            (this.currentPage - 1)* this. pageSize,
            this.currentPage * this.pageSize
        )
    },
    methods: {
        bigImage(value) {
            console.log(value);
            this.srcList[0] = value;
        },
        currentChange(value){
            console.log(value);
            this.info = this.totalData.slice(
            (value - 1)* this. pageSize,
            value * this.pageSize
        )
        },
        godatil(row,column,event){
            // console.log(row,column,event);
            if(event.target.tagName != "IMG"){
                this.$router.push({
                    name:'studatil',
                    query:{
                        stuInfoDetail: JSON.stringify(row),
                    }
                })

            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;

    .tent {
        table {
            border: 1px solid black;

            tr {
                td {
                    border: 1px solid black;
                }
            }
        }
    }
}
</style>